<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>今日头条</title>
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="static/css/bootstrap.min.css">
	<link rel="stylesheet" href="static/css/style.css">
	<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="static/css/bootstrap/js/bootstrap.min.js"></script>
	<script src="static/js/live.js"></script>
</head>
<body>
	<!-- 主页 导航 nav -->
	<nav>
		<ul class="fl">
			<li class="br"><a href="">下载APP</a></li>
			<li>北京&nbsp;  霾  &nbsp;5° /&nbsp; 25°&nbsp;&nbsp;<i class="fa fa-angle-down"></i></li>
		</ul>
		<ul class="fr">
			<li  class="br"><a href="">侵权投诉</a></li>
			<li><a href="">头条产品</a></li>
		</ul>
	</nav>
	<!-- 主页 内容布局 content -->
	<div class="content">
		<div class="menus fl mr_30">
			<a href=""><img src="static/images/logo.png" width='110px' alt=""></a>
			<a href="" title="" style="color: #fff;background-color: #ed4040;margin-bottom:5px;margin-top:15px;">推荐</a>
			<a href="" title="">阳光宽带</a>
			<a href="" title="">热点</a>
			<a href="" title="">直播</a>
			<a href="" title="">图片</a>
			<a href="" title="">科技</a>
			<a href="" title="">娱乐</a>
			<a href="" title="">游戏</a>
			<a href="" title="">体育</a>
			<a href="" title="">汽车</a>
			<a href="" title="">财经</a>
			<a href="" title="">搞笑</a>
			<a href="" title="">更多</a>		
		</div>
		<!-- 新闻栏 news -->
		<div class="news fl mr_30">
			<div class="msg">
				<ul class="msg_title bb" id="msg_title">
				  	<li class="check">发布图文</li>
				  	<li>发布视频</li>
				  	<li>发布问答</li>
				</ul>
				<!-- 图文 -->
				<div class="msg_tab">
					<div class="msg_text">
						<!-- <textarea class="bb" placeholder="分享你的精彩时刻"></textarea> -->
						<div class="bb textarea"  contenteditable="true" placeholder="分享你的精彩时刻"></div>
						<span class="text"><span id="count" class="num">0</span>/2000字</span>
					</div>
					<div class="msg_list">
						<span><i class="fa fa-image" style="color:#ed4040"></i>添加图片</span>
						<span> <i class="fa fa-square-o big"></i>发布长文</span>
						<span onclick="showEmoji()" style="cursor:pointer"><img src="static/images/a.png" width="20px" alt=""></span>
							<div class="Emoji" id="Emoji" style="display:none">
								<span class="arrow"></span>
								<i class="fa fa-times" id="close" aria-hidden="true"></i>
								<div class="emoji"></div>
							</div>
						<button class="fr btn disabled">发布</button>
					</div>
				</div>
				<!-- 视频 -->
				<div class="msg_tab" style="display:none">
					<div class="msg_text">
						<textarea class="bb" placeholder="视频标题（30字以内）"></textarea>
						<span class="text"><span class="num">0</span>/30字</span>
					</div>
					<div class="msg_list">
						<span><i class="fa fa-video-camera" style="color:#78B1F6"></i>添加视频</span>
						<button class="fr btn disabled">发布</button>
					</div>
				</div>
				<div class="msg_tab" style="display:none">
					<div class="msg_text">
					<input  class="bb"  type="text" placeholder="请输入问题标题（4-40字）" width="660px">
						<textarea placeholder="请输入问题背景描述（4-40字）" style="height:60px"></textarea>
						<span class="text"><span  class="num">0</span>/40字</span>
					</div>
					<div class="msg_list">
						<span><i class="fa fa-image" style="color:#ed4040"></i>添加图片</span>
						<span> <i class="fa fa-pencil-square-o" style="color:#ed4040"></i>更多问答</span>
						<button class="fr btn disabled">发布</button>
					</div>
				</div>
			</div>
			<!-- 发布新闻列表 -->
			<div class="new_list mt_10 bb">
				<a href="" class="strong">时政微视频：一项新中国外交纪录这样诞生</a>
				<img class="fr" src="static/images/xuexi.png" alt="" width="100px">
				<p class="mt_10">
					<span class="tip mr_10">视频</span>
					<span><img src="static/images/a.jpg" style="width:18px;border-radius:5px;" alt=""> 央视新闻&nbsp;⋅</span>
					<span>人评论&nbsp;⋅</span>
					<span>时间</span>
					<span class=" remove fr">
					<span class="fa fa-close noT"></span>
						不感兴趣
					</span>
				</p>
			</div>
			<div class="new_list mt_10 bb">
				<a href="" class="strong">坚守初心使命 习近平号召向他们学习</a>
				<p class="mt_10">
					<span class="tip mr_10">时政</span>
					<span><img src="static/images/a.jpg" style="width:18px;border-radius:5px;" alt=""> 央视新闻&nbsp;⋅</span>
					<span>人评论&nbsp;⋅</span>
					<span>时间</span>
					<span class=" remove fr">
					<span class="fa fa-close noT"></span>
						不感兴趣
					</span>
				</p>
			</div>
			<div class="new_list mt_10 bb">
				<a href="" class="strong">马龙夺冠创历史</a>
				<p class="mt_10">
					<span class="tip mr_10">时政</span>
					<span><img src="static/images/11.jpg" style="width:18px;border-radius:5px;" alt=""> 新华社&nbsp;⋅</span>
					<span>人评论&nbsp;⋅</span>
					<span>时间</span>
					<span class=" remove fr">
					<span class="fa fa-close noT"></span>
						不感兴趣
					</span>
				</p>
			</div>
			<div class="new_list mt_10 bb">
				<div class="Pic">
					<img src="static/images/A1.jpg" alt="" height="100" class="fl mr_10">
				</div>
				<div class="fl mt_10" style="width:75%">
					<a href="" class="strong">建筑工地留不住90后：“20多岁的基本没有，干十天半月就跑”</a>
					<p class="mt_10">
						<span class="tip mr_10">时政</span>
						<span><img src="static/images/11.jpg" style="width:18px;border-radius:5px;" alt=""> 新华社&nbsp;⋅</span>
						<span>人评论&nbsp;⋅</span>
						<span>时间</span>
						<span class=" remove fr">
						<span class="fa fa-close noT"></span>
							不感兴趣
						</span>
					</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="new_list mt_10 bb">
				<div class="Pic">
					<img src="static/images/A1.jpg" alt="" height="100" class="fl mr_10">
				</div>
				<div class="fl mt_10" style="width:75%">
					<a href="" class="strong">建筑工地留不住90后：“20多岁的基本没有，干十天半月就跑”</a>
					<p class="mt_10">
						<span class="tip mr_10">时政</span>
						<span><img src="static/images/11.jpg" style="width:18px;border-radius:5px;" alt=""> 新华社&nbsp;⋅</span>
						<span>人评论&nbsp;⋅</span>
						<span>时间</span>
						<span class=" remove fr">
						<span class="fa fa-close noT"></span>
							不感兴趣
						</span>
					</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="new_list mt_10 bb">
				<div class="Pic">
					<img src="static/images/A1.jpg" alt="" height="100" class="fl mr_10">
				</div>
				<div class="fl mt_10" style="width:75%">
					<a href="" class="strong">建筑工地留不住90后：“20多岁的基本没有，干十天半月就跑”</a>
					<p class="mt_10">
						<span class="tip mr_10">时政</span>
						<span><img src="static/images/11.jpg" style="width:18px;border-radius:5px;" alt=""> 新华社&nbsp;⋅</span>
						<span>人评论&nbsp;⋅</span>
						<span>时间</span>
						<span class=" remove fr">
						<span class="fa fa-close noT"></span>
							不感兴趣
						</span>
					</p>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!-- 广告栏 ad -->
		<div class="adverts fl">
			<form action="" method="">
				<input class="fl" type="text" placeholder="请输入搜索内容">
				<input class="fl"  type="button" value="搜索">
			</form>
			<div class="clear"></div>
			<div class="advert mt_20 p_20">
				<div class="login p_20">
					<p>登录后可以保存您的浏览喜好、评论、收藏，并与APP同步更可以发布微头条</p>
					<input type="button" value="登录" class="mt_10">
					<ul style="width:100px;padding-top: 20px;display:inline-block">
						<li class="mr_20"><a href=""><img src="static/images/QQ.svg" width="35" alt=""></a><p>QQ</p></li>
						<li><a href=""><img src="static/images/weixin.svg" width="35" alt=""></a><p>微信</p></li>
						<div class="clear"></div>
					</ul>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>